<template>
  <div>

    <el-card class="box-card">
      <el-form ref="truckType" :model="queryVO" label-width="80px" :inline="true">
        <el-form-item label="车辆名称:" prop="name">
          <el-input type="text" placeholder="请输入车辆名称" v-model="queryVO.name"></el-input>
        </el-form-item>
        <el-form-item label="准载重量:" prop="allowableLoad">
          <el-input type="text" placeholder="请输入车辆载重" v-model="queryVO.allowableLoad"></el-input>
        </el-form-item>
        <el-form-item label="准载体积:" prop="allowableVolume">
          <el-input type="text" placeholder="请输入车辆体积" v-model="queryVO.allowableVolume"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="pageTruckType()" icon="el-icon-search" type="primary">查询</el-button>
          <el-button @click="reset()" icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>

    </el-card>
    <el-divider></el-divider>
    {{tableData}}
    <el-card class="box-card">
      <el-button @click="openAddTruckType()" type="info" icon="el-icon-edit">新增车型</el-button>
      <el-table v-loading="loading" :data="tableData" style="width: 100%">
        <el-table-column
          width="120"
          label="序号">
          <template slot-scope="scop">
            <!--            queryVo.pageNum 当前页
                        queryVo.pageSize 页大小-->
            {{ scop.$index + (pagenum - 1) * pagesize + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="id" label="车辆编号" width="170">

        </el-table-column>
        <el-table-column prop="name" label="车辆名称" width="140">

        </el-table-column>
        <el-table-column prop="allowableLoad" label="准载重量(千克)" width="140">

        </el-table-column>
        <el-table-column prop="allowableVolume" label="准载体积(方)" width="140">

        </el-table-column>
        <el-table-column prop="measureLong" label="长(米)" width="120">

        </el-table-column>
        <el-table-column prop="measureWidth" label="宽(米)" width="120">

        </el-table-column>
        <el-table-column prop="measureHigh" label="高(米)" width="120">

        </el-table-column>

        <el-table-column label="适用货品类型" width="400">
          <template slot-scope="scope">
            <div v-for="data in scope.row.pdGoodsType" :key="data.id" style="display:initial">
              <el-tag style="margin: 5px 5px;">{{ data.name }}</el-tag>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button type="text" size="medium " @click="openUpdTruckType(scope.row)">编辑</el-button>
            <el-button style="color: red" type="text" size="medium" @click="remTruckTypeByTruckId(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center">
        <br>
        <el-pagination
          @size-change="setSize"
          @current-change="setPage"
          :current-page="pagenum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>

    <el-dialog
      title="添加车辆类型"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <div>
        <el-form ref="form" :model="addTruckTypeData" label-width="120px">
          <el-form-item label="* 车型名称">
            <el-input v-model="addTruckTypeData.name"></el-input>
          </el-form-item>
          <el-form-item label="车型载重">
            <el-input v-model="addTruckTypeData.allowableLoad">
              <template slot="append">千克</template>
            </el-input>
          </el-form-item>
          <el-form-item label="车型体积">
            <el-input v-model="addTruckTypeData.allowableVolume">
              <template slot="append">方</template>
            </el-input>
          </el-form-item>
          <el-form-item label="长">
            <el-input v-model="addTruckTypeData.measureLong">
              <template slot="append">米</template>
            </el-input>
          </el-form-item>
          <el-form-item label="宽">
            <el-input v-model="addTruckTypeData.measureWidth">
              <template slot="append">米</template>
            </el-input>
          </el-form-item>
          <el-form-item label="高">
            <el-input v-model="addTruckTypeData.measureHigh">
              <template slot="append">米</template>
            </el-input>
          </el-form-item>
          <el-form-item label="* 适用货品类型">
            <el-select
              style="width: 100%"
              v-model="addTruckTypeData.goodsTypeIds"
              @change="refreshStatus"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="请选择适用货物类型">
              <el-option
                v-for="goods in goodsTypeData"
                :label="goods.name"
                :value="goods.id"
                :key="goods.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="danger" @click="addTruckType()">添 加</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="修改车辆类型"
      :visible.sync="dialogVisible1"
      width="30%"
      :before-close="handleClose1">
      <div>
        <el-form ref="form" :model="updTruckTypeData" label-width="120px">
          <el-form-item label="* 车型名称">
            <el-input v-model="updTruckTypeData.name"></el-input>
          </el-form-item>
          <el-form-item label="车型载重">
            <el-input v-model="updTruckTypeData.allowableLoad">
              <template slot="append">千克</template>
            </el-input>
          </el-form-item>
          <el-form-item label="车型体积">
            <el-input v-model="updTruckTypeData.allowableVolume">
              <template slot="append">方</template>
            </el-input>
          </el-form-item>
          <el-form-item label="长">
            <el-input v-model="updTruckTypeData.measureLong">
              <template slot="append">米</template>
            </el-input>
          </el-form-item>
          <el-form-item label="宽">
            <el-input v-model="updTruckTypeData.measureWidth">
              <template slot="append">米</template>
            </el-input>
          </el-form-item>
          <el-form-item label="高">
            <el-input v-model="updTruckTypeData.measureHigh">
              <template slot="append">米</template>
            </el-input>
          </el-form-item>
          {{goodsTypeData}}
          <el-form-item label="* 适用货品类型">
            <el-select
              style="width: 100%"
              @change="refreshStatus"
              v-model="updTruckTypeData.goodsTypeIds"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="请选择适用货物类型">
              <el-option
                v-for="goods in goodsTypeData"
                :label="goods.name"
                :value="goods.id"
                :key="goods.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="danger" @click="updTruckType()">修 改</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
//import delivery from '../orderManagement/delivery.vue';
import truckTypeApi from '@/api/tms/transferCenter/truckType.js'
import goodsTypeApi from '@/api/tms/transferCenter/goodsType.js'
export default {
  //components: {delivery},
  name: "truckList",
  data() {
    return {
      //  当前页
      pagenum: 1,
      //  一页显示几条数据
      pagesize: 5,
      //  总数
      total: 0,
      //  查询出来的数据
      tableData: [],
      //  搜索条件
      queryVO: {
        "name": null,
        "allowableLoad": null,
        "allowableVolume": null
      },
      //  table的加载状态
      loading: false,
      //  添加对话框的显示状态
      dialogVisible: false,
      //  添加对话框数据
      addTruckTypeData: {
        name: "",
        allowableLoad: "",
        allowableVolume: "",
        measureLong: "",
        measureWidth: "",
        measureHigh: "",
        goodsTypeIds: []
      },
      //  所有货品类型数据
      goodsTypeData: [],
      //  修改对话框的显示状态
      dialogVisible1: false,
      //  修改对话框的数据
      updTruckTypeData: {
        name: "",
        allowableLoad: "",
        allowableVolume: "",
        measureLong: "",
        measureWidth: "",
        measureHigh: "",
        goodsTypeIds: []
      }
    };
  },
  methods: {
    //  分页查询车辆类型及相关数据
    pageTruckType(params = {}) {

      params.page = this.pagenum
      params.pageSize = this.pagesize
      if (this.queryVO) {
        params.name = this.queryVO.name
        params.allowableLoad = this.queryVO.allowableLoad
        params.allowableVolume = this.queryVO.allowableVolume
      }
      this.loading = true
      truckTypeApi.page(params).then(({data}) => {
        this.tableData = data.items
        this.total = data.counts
        this.loading = false
      })
    },
    //  刷新select框
    refreshStatus() {
      this.$forceUpdate()
    },
    //  清空搜索栏的数据
    reset() {

      this.queryVO.name = null
      this.queryVO.allowableLoad = null
      this.queryVO.allowableVolume = null
    },
    //  查询所有货物类型
    findGoodsAll() {

      goodsTypeApi.all().then((data) => {
        //debugger
        this.goodsTypeData = data.data;
        this.$store.commit("startAnimation",false);
        
      })
    },
    //  根据车辆类型ID查询货物类型数据
    findGoodsByTruckTypeId(truckTypeId) {

      truckTypeApi.selGoodsByTruckTypeId(truckTypeId).then((data) => {
        this.findGoodsAll()
        //debugger
        let ids = []
        for (let i in data.data.goodsTypeIds) {
          ids[ids.length] = data.data.goodsTypeIds[i]
        }
        this.updTruckTypeData.goodsTypeIds = ids
      })
    },
    //  根据车辆类型ID删除车辆类型
    /*
    remTruckTypeByTruckId(truckTypeId) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        truckTypeApi.delete(truckTypeId.pdTruckType.id).then((data) => {
          if (data.data.code == 200) {

            this.$notify({
              title: '成功',
              message: '车辆类型删除成功!',
              type: 'success'
            })
            this.pageTruckType()
            return
          }
          if (data.data.code == 203) {
            this.$message.error('您的权限不够!');
            return
          }
          if (data.data.code == 201) {

            this.$notify({
              title: '警告',
              message: data.data.message,
              type: 'warning'
            })
            return
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },*/
    //  打开添加车辆类型的对话框
    openAddTruckType() {

      this.addTruckTypeData.name = ""
      this.addTruckTypeData.allowableLoad = ""
      this.addTruckTypeData.allowableVolume = ""
      this.addTruckTypeData.measureLong = ""
      this.addTruckTypeData.measureWidth = ""
      this.addTruckTypeData.measureHigh = ""
      this.addTruckTypeData.goodsTypeIds = []
      this.findGoodsAll()
      this.dialogVisible = true
    },
    //  关闭添加车辆类型的对话框
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    //  添加车辆类型
    addTruckType() {

      if (this.addTruckTypeData.name == "" || this.addTruckTypeData.name == null) {

        this.$notify({
          title: '警告',
          message: '请输入车型名称!',
          type: 'warning'
        });
        return;
      }
      if (this.addTruckTypeData.goodsTypeIds.length == 0) {

        this.$notify({
          title: '警告',
          message: '请选择适用货物类型!',
          type: 'warning'
        });
        return;
      }
      
      truckTypeApi.save(this.addTruckTypeData).then((data) => {
        if (data.data.code == 200) {
          this.$notify({
            title: '成功',
            message: '车辆类型添加成功!',
            type: 'success'
          });

          this.dialogVisible = false
          this.pageTruckType()
        }

      })
    },
    //  打开修改车辆类型的模块框
    openUpdTruckType(truckType) {
      debugger
      this.$store.commit("startAnimation",true);
      this.findGoodsByTruckTypeId(truckType.id)
      this.updTruckTypeData = truckType
    },
    //  关闭添加车辆类型的对话框
    handleClose1(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
    },
    //  修改车辆类型
    updTruckType() {
      if (this.updTruckTypeData.name == "" || this.updTruckTypeData.name == null) {

        this.$notify({
          title: '警告',
          message: '请输入车型名称!',
          type: 'warning'
        });
        return;
      }
      if (this.updTruckTypeData.goodsTypeIds.length == 0) {

        this.$notify({
          title: '警告',
          message: '请选择适用货物类型!',
          type: 'warning'
        });
        return;
      }

      truckTypeApi.update(this.updTruckTypeData.id,this.updTruckTypeData).then(({data}) => {

        if (data) {

          this.$notify({
            title: '成功',
            message: '车辆类型修改成功!',
            type: 'success'
          });

          this.dialogVisible1 = false
          this.pageTruckType()
        }
      })

    },
    //  修改总页数
    setPage(val) {

      this.pagenum = val
      this.pageTruckType()

    },
    //  设置一页显示多少数据
    setSize(val) {

      this.pagesize = val
      this.pageTruckType()
    }
  },
  created() {

    this.pageTruckType()
  }
};
</script>
<style>
body {
  margin: 0;
}
</style>
